/*
 * @Author: yaoge233 1351192080@qq.com
 * @Date: 2024-12-23 00:56:32
 * @LastEditors: yaoge233 1351192080@qq.com
 * @LastEditTime: 2024-12-23 01:03:33
 * @FilePath: \react-learning\src\17.Redux与React-实现counter.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 配套工具
// 在React中使用redux，官方要求安装俩个其他插件-ReduxToolkit和react-redux
// 1. Redux Toolkit(RTK) - 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式
// 2. react-redux - 用来 链接 Redux 和 React组件 的中间件
// npm i @reduxjs/toolkit react-redux

import { useSelector, useDispatch } from "react-redux";

// React组件获取tore中的数据
//在React组件中使用store中的数据，需要用到一个钩子函数-useSelector，它的作用是把store中的数据映射到组件中

// React组件修改store中的数据
// React组件中修改store中的数据需要借助另外一个hook函数-useDispatch，它的作用是生成提交action对象的dispatch函数
import { increment,decrement } from "./store/modules/counterStore"

function App() {
  const { count } = useSelector(state => state.counter)
  //得到useDispatch函数
  const dispatch = useDispatch()
  return (
    <div className="App">
      {/* 调用dispatch提交action函数 */}
      <button onClick={()=> dispatch(decrement())}>-</button>
      { count }
      <button onClick={()=> dispatch(increment())}>+</button>
    </div>
  );
}

export default App;
